<template>
    <div class="food">
        <div class="food-banner">
            <img :src="banner.pic">
        </div>
        <div class="food-content" v-for="(item, index) in floors" :key="index">
            <div class="title">
                <span class="title-style">{{item.title}}</span>
            </div>
            <div class="floors-content">
                <figure v-for="(val, index) in item.products" :key="index">
                    <router-link to="/productDetail">
                        <img :src="val.pic" class="img4">
                    </router-link>
                    <figcaption>
                        <p>{{val.alias}}</p>
                        <h2>{{val.name}}</h2>
                        <span class="redPrice">{{val.salesPrice}}</span>
                        <b class="grayPrice">{{val.marketPrice}}</b>
                        <img @click="add(val)" src="../../static/img/icon-add-to-cart-green.png">
                    </figcaption>
                    <div class="figure-tag">
                        <img :src="val.tags[0].pic" v-if="val.tags.length>0">
                    </div>
                </figure>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    props: {
        floors: {
            required: true,
        },
        banner: {
            required: true,
        }
    },
    mounted() {      
    },
    methods: {
        add(item) {
            this.$store.commit("addProduct", item);
        }
    },
}
</script>

<style scoped>
@import "../../static/css/base.css";
.food {
    width: 100%;
}

.food-banner {
    width: 100%;
    /*height: 1.92rem;*/
}

.food-banner img {
    width: 100%;
    height: 1.92rem;
}

.title {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    position: relative;
    background: #F9F9F9;
}

.title-style {
    color: #262626;
    font-size: 0.11rem;
    margin-left: 0.2rem;
}

.title-style:after {
    content: "";
    position: absolute;
    width: 0.15rem;
    height: 0.1rem;
    background: rgb(119, 188, 31);
    left: 0rem;
    top: 0.15rem;
}

.floors-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #F9F9F9;
}

.floors-content figure {
    width: 2.7rem;
    margin: 0 0.1rem 0.1rem 0;
    background: #fff;
    position: relative;
}

.floors-content figure .img4 {
    width: 2.7rem;
    height: 2.7rem;
}

.floors-content figcaption {
    position: relative;
}

.floors-content figcaption>h2 {
    font-size: .15rem;
    font-weight: normal;
    color: #777;
}

.floors-content figcaption>img {
    width: .28rem;
    height: .25rem;
    position: absolute;
    right: 0.2rem;
    bottom: 0.05rem;
}

.figure-tag {
    position: absolute;
    left: 0;
    top: 0;
}

.redPrice {
    color: red;
    font-size: .14rem;
}

.grayPrice {
    font-size: .1rem;
    color: gray;
    text-decoration: line-through;
    font-weight: normal;
    margin-left: .04rem;
}
</style>  